<template>
  <main class="main-bg">
    <div id="top"></div>

    <div id="left-top">
      <div class="title">工业互联网消费额排名</div>
      <div class="sub-title">Industrial Internet consumption ranking</div>
      <BaseEChart :chartOption="amountRankOption" />
    </div>

    <div id="left-bottom">
      <div class="title">物料生产制造最强区/街道</div>
      <div class="sub-title">
        The strongest area for material production
      </div>
      <BaseEChart :chartOption="strongestPurchasingOption" />
    </div>

    <div id="right-top">
      <div class="title">物料平均消费金额</div>
      <div class="sub-title">
        Average consumption amount of materials
      </div>
      <BaseEChart :chartOption="ageGroupOption" />
    </div>

    <div id="right-bottom">
      <div class="title">知名品牌/新型能产力最强TOP3</div>
      <div class="sub-title">
        Well-known brands/new models with the highest productivity TOP3
      </div>
      <BaseEChart :chartOption="topBrandsOption" />
    </div>

    <div id="mid-top">
      <Digital />
    </div>

    <div id="mid-bottom"></div>
  </main>
</template>

<script setup lang="ts">
import BaseEChart from '@/components/BaseEChart.vue'
import Digital from '@/components/Digital.vue'
import { amountRankOption } from './config/amount-rank-option'
import { strongestPurchasingOption } from './config/strongest-purchasing-option'
import { topBrandsOption } from './config/top-brands-option'
import { ageGroupOption } from './config/age-group-option'
</script>

<style scoped>
.main-bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.title {
  font-size: 24px;
  color: white;
}

.sub-title {
  color: white;
  margin-bottom: 20px;
}

#top {
  position: absolute;
  width: 100%;
  height: 183px;
  background-size: cover;
  background-image: url(@/assets/imgs/top_bg.svg);
}

#left-top {
  position: absolute;
  top: 130px;
  left: 20px;
  width: 500px;
  height: 320px;
}

#left-bottom {
  position: absolute;
  top: 580px;
  left: 20px;
  width: 500px;
  height: 320px;
}

#right-top {
  position: absolute;
  top: 130px;
  right: 20px;
  width: 500px;
  height: 320px;
}

#right-bottom {
  position: absolute;
  top: 580px;
  right: 20px;
  width: 500px;
  height: 320px;
}

#mid-top {
  position: absolute;
  top: 230px;
  left: 690px;
}

#mid-bottom {
  position: absolute;
  top: 490px;
  left: 520px;
  width: 860px;
  height: 460px;
  background: center / cover no-repeat url(https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D3952509840%2C2590295218%26fm%3D217%26app%3D126%26f%3DJPEG%3Fw%3D668%26h%3D375%26s%3D36BC7585449A5DDA5C10348003002089&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f242,182&n=0&g=0n&q=100?sec=1734066550&t=fead290c942de264a2b1b7a290b29e49);
}
</style>
